<template>
  <div class="login">
    <header class="clear">
      <div class="fl">
        <img src="../assets/img/logo_blue.png" alt="" style="height: 100%" />
      </div>
    </header>
    <div class="middle">
      <div class="themeCover">
        <div class="first">欢迎来到</div>
        <div class="second"></div>
        <div class="third">
          设备<br />
          资产管理系统
        </div>
        <div class="title">Equipment Asset Management System</div>
      </div>
      <div class="operate">
        <div class="loginForm">
          <div class="backBtn" @click="goBack">
            <img
              style="height: 18px; width: 18px"
              src="../assets/img/返回.png"
              alt=""
            />
            <span class="tip">返回登录</span>
          </div>
          <div class="photo">
            <div class="avatar" v-loading="loading">
              <img :src="circleUrl" alt="" v-if="circleUrl" />
              <span v-else class="text">{{ userName }}</span>
            </div>
          </div>
          <div class="account">账号：{{ account }}</div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-form-item prop="currDs" v-if="!hideDs">
              <el-select
                class="w100"
                v-model="ruleForm.currDs"
                placeholder="请选择"
                @change="selectDs"
              >
                <img slot="prefix" src="../assets/img/租户-常态.png" alt="" />
                <el-option
                  v-for="item in DsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="currOrg" v-if="!hideOrg">
              <el-select
                class="w100"
                v-model="ruleForm.currOrg"
                placeholder="请选择"
                @change="selectOrg"
              >
                <img slot="prefix" src="../assets/img/组织-常态.png" alt="" />
                <el-option
                  v-for="item in OrgOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="currLeader" v-if="!hideLeader">
              <el-select
                class="w100"
                v-model="ruleForm.currLeader"
                placeholder="请选择"
                @change="selectLeader"
              >
                <img slot="prefix" src="../assets/img/本人-常态.png" alt="" />
                <el-option
                  v-for="item in LeaderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                class="w100 login-btn"
                style="
                  height: 44px;
                  margin-top: 18px;
                  font-size: 18px;
                  font-weight: 530;
                "
                type="primary"
                @click="goHome();btnBlur"
                >进入主页</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSsoLoginUserInfo, getOaLoginUserInfo } from "@/api/login.js";
import { getVersionApi } from "@/api/common.js";
export default {
  data() {
    return {
      loading: false,
      circleUrl: null,
      account: "",
      userName: "",
      hideDs: false,
      hideOrg: false,
      hideLeader: false,
      ruleForm: {
        currDs: "",
        currOrg: "",
        currLeader: "",
      },
      rules: {},
      DsOptions: [],
      OrgOptions: [],
      LeaderOptions: [],
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    btnBlur(e) {
      // el-button按钮点击后默认处于focus选中状态，手动取消掉按钮选中状态
      let target = e.target
      if(target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
    },
    selectDs(val) {
      this.$store.commit("SET_CURRDS", val);
      localStorage.setItem("currDs", val);
    },
    selectOrg(val) {
      this.$store.commit("SET_CURRORG", val);
      localStorage.setItem("currOrg", val);
    },
    selectLeader(val) {
      this.$store.commit("SET_CURRIDEN", val);
      localStorage.setItem("currLeader", val);
      this.$store.dispatch("GetUserInfo").then(() => {
        this.init();
      });
    },
    //初始化数据
    init() {
      if (this.$store.getters.appList.length > 1) {
        this.DsOptions = this.$store.getters.appList;
      } else {
        this.hideDs = true;
      }
      if (this.$store.getters.orgList.length > 1) {
        this.OrgOptions = this.$store.getters.orgList;
      } else {
        this.hideOrg = true;
      }
      if (this.$store.getters.idenList.length > 1) {
        this.LeaderOptions = this.$store.getters.idenList;
      } else {
        this.hideLeader = true;
      }
      this.ruleForm = this.$store.getters.currentInfo;
    },
    //获取用户信息
    getUserInfo() {
      //this.$utils.clearUserInfo();
      const params = {
        ticket: this.$route.query.ticket ? this.$route.query.ticket : null,
        account: this.$route.query.account ? this.$route.query.account : null,
        rsaStr: this.$route.query.rsaStr ? this.$route.query.rsaStr : null,
      };
      if (params.rsaStr) {
        this.$utils.clearUserInfo();
        getOaLoginUserInfo(params).then(
          (res) => {
            this.account = res.data.account;
            this.userName = res.data.name;
            if (res.data.photo) {
              this.loading = true;
              this.$utils.echoImg(res.data.photo).then((res) => {
                this.circleUrl = res;
                this.loading = false;
                this.$store.commit("SET_AVATARURL", res);
              });
            } else {
              this.$store.commit("SET_AVATARURL", null);
            }
            this.$store.commit("SET_STAFFINFO", res.data);
            this.$store.commit("SET_CURRENTINFO", res.data);
            let appList = res.data.appSimpleBeanList;
            this.$store.commit("SET_APPLIST", appList);
            this.init();
          },
          (error) => {
            this.$message.error(error);
          }
        );
      } else {
        getSsoLoginUserInfo(params).then(
          (res) => {
            this.account = res.data.account;
            this.userName = res.data.name;
            if (res.data.photo) {
              this.$utils.echoImg(res.data.photo).then((res) => {
                this.circleUrl = res;
              });
            }
            this.$store.commit("SET_STAFFINFO", res.data);
            this.$store.commit("SET_CURRENTINFO", res.data);
            let appList = res.data.appSimpleBeanList;
            this.$store.commit("SET_APPLIST", appList);
            this.init();
          },
          (error) => {
            this.$message.error(error);
          }
        );
      }
    },
    //跳转到主页
    async goHome() {
      //await this.$store.dispatch("GetDictData");
      await this.$store.dispatch("GetUserInfo");
      this.getVersion();
      setTimeout(() => {
        this.$router.push({
          path: "/workStation",
        });
      }, 200);
    },
    //获取版本信息
    getVersion() {
      const data = {
        classifyCode: "common",
        code: "version",
      };
      getVersionApi(data).then((res) => {
        localStorage.setItem(
          "version",
          res.data.configDetailList[0].value || ""
        );
      });
    },
    goBack() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/loginBackGround.png");
  position: relative;
  .fl {
    width: 165px;
    height: 40px;
    margin: 20px 0 0 20px;
  }
  .middle {
    position: absolute;
    width: 1440px;
    height: 680px;
    border-radius: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    .themeCover {
      width: 900px;
      height: 680px;
      border-radius: 16px 0px 0px 16px;
      background: url(../assets/img/systemTheme.png) no-repeat center,
        linear-gradient(135deg, #0858a9 0%, #478ed5 100%);
      box-shadow: 0px 0px 40px 0px rgba(51, 102, 204, 0.12);
      font-family: Source Han Sans CN;
      position: relative;
      .title {
        position: absolute;
        width: 440px;
        height: 50px;
        font-size: 24px;
        font-weight: 300;
        color: #ffffff;
        line-height: 50px;
        padding: 0 9px;
        border: 1px solid #ffffff;
        bottom: 53px;
        right: 51px;
      }
      .first {
        position: absolute;
        top: 75px;
        left: 71px;
        width: 145px;
        height: 34px;
        font-size: 36px;
        font-weight: 300;
        font-style: italic;
        color: #ffffff;
        line-height: 54px;
      }
      .second {
        position: absolute;
        top: 149px;
        left: 75px;
        width: 40px;
        height: 6px;
        background: #ffffff;
      }
      .third {
        text-align: left;
        position: absolute;
        top: 196px;
        left: 71px;
        width: 216px;
        height: 89px;
        font-size: 36px;
        font-weight: 400;
        color: #ffffff;
        line-height: 54px;
      }
    }
    .operate {
      width: 540px;
      height: 680px;
      background: #ffffff;
      box-shadow: 0px 0px 40px 0px rgba(51, 102, 204, 0.12);
      border-radius: 0px 16px 16px 0px;
      font-family: Source Han Sans CN;
      /deep/.el-input__inner {
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #0d60b4;
      }
      .loginForm {
        margin: 71px 110px 154px 110px;
        height: 455px;
        text-align: center;
        .backBtn {
          text-align: left;
          margin-bottom: 23px;
          cursor: pointer;
          .tip {
            margin-left: 5px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
        }
        .avatar {
          position: relative;
          left: 50%;
          transform: translate(-50%);
          width: 76px;
          height: 76px;
          margin-bottom: 19px;
          background: #c7ddff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img {
            width: 76px;
            height: 76px;
            overflow: hidden;
            border-radius: 50%;
          }
          .text {
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .account {
          margin-bottom: 32px;
          font-size: 16px;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
.demo-ruleForm /deep/ .el-input__inner {
  padding-left: 40px;
  font-size: 16px;
}
.demo-ruleForm /deep/ .el-input__suffix {
  .el-icon-circle-close:before {
    font-family: "iconfont";
    content: "\e6b6";
    color: rgba(152, 167, 185, 0.5);
  }
}
.login-btn:focus {
  background-color: #0754A3;
}
.login-btn:active {
  background-color: #00468E;
}
</style>